<template>
  <el-row :gutter="15" class="">
    <el-form
      ref="elForm"
      :model="dataForm"
      :rules="rules"
      size="small"
      :label-width="labelWidth"
      label-position="right"
    >
      <template>
        <el-col :span="24">
          <el-form-item label="关键词" prop="templateJson">
            <div class="tag-list">
              <el-tag
                v-for="tag in templateJson"
                :key="tag.enCode"
                effect="plain"
                @click="addContent(tag)"
              >
                {{
                  tag.fullName
                    ? tag.enCode + "(" + tag.fullName + ")"
                    : tag.enCode
                }}</el-tag
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="消息标题" prop="title">
            <el-input
              v-model="dataForm.title"
              placeholder="消息标题"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <el-input
              v-model="dataForm.content"
              placeholder="内容"
              :style="{ width: '100%' }"
              true
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </template>
    </el-form>
  </el-row>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      default: () => {
        title = "";
        content = "";
      },
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    keywordList: {
      type: Array,
      default: () => [],
    },
  },
  model: {
    prop: "value",
    event: "update",
  },
  data() {
    return {
      dataForm: this.value,
      rules: {
        title: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      // 关键词数组
      templateJson: this.keywordList,
    };
  },
  computed: {},
  watch: {
    keywordList() {
      this.templateJson = this.keywordList;
    },
  },
  created() {},
  mounted() {},
  methods: {
    /**参数add消息内容handle */
    addContent(item) {
      this.dataForm.title += "{" + item.enCode + "}";
      this.dataForm.content += "{" + item.enCode + "}";
    },
    // 表单提交
    submit() {
      let _v = false;
      this.$refs["elForm"].validate((valid) => {
        _v = valid;
      });
      return _v;
    },
  },
};
</script>
